<!-- 组织结构树  输入搜索框-->
<template>
  <div>

    <el-row :gutter="4">
      <el-col :span="20">
        <el-input
          v-model="filterText"
          placeholder="输入组织名称进行过滤"
          size="small"
        />
      </el-col>
      <el-col :span="4">
        <el-button size="small" icon="el-icon-refresh" @click="getDepTree" />
      </el-col>
    </el-row>

    <el-tree
      ref="tree"
      v-loading="loading"
      :data="depTree"
      :props="defaultProps"
      :highlight-current="true"
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
import { tree } from '@/api/sys/Department'
export default {
  name: 'DepTree',
  props: {
    handleNodeClick: {
      type: Function,
      default() {

      }
    }
  },
  data() {
    return {
      filterText: '',
      dep_id: null,
      loading: false,
      depTree: [],
      defaultProps: {
        children: 'children',
        label: 'depName'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getDepTree()
  },
  methods: {
    getDepTree() {
      this.loading = true
      this.handleNodeClick()
      tree().then(res => {
        setTimeout(() => {
          this.depTree = res.data
          this.loading = false
        }, 200)
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.depName.indexOf(value) !== -1
    }
  }
}
</script>

<style scoped>

</style>
